<template>
  <formDialog
    :dialogFormVisible="dialogFormVisible"
    :height="90"
    @close="
      (event) => {
        $emit('setDialog', event);
      }
    "
    :title="title"
  >
    <template #form>
      <scroll>
        <el-form
          label-position="top"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="formBox mb-20">
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="学院名称">
                  <el-input
                    v-model="addDetailInfo.facultyName"
                    size="mini"
                    :placeholder="'请输入学院名称'"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实验室" prop="laboratoryName">
                  <selectName
                    :selectArr="laboratoryData"
                    :title="false"
                    keys="laboratoryName"
                    label="laboratoryName"
                    valueKey="laboratoryName"
                    :placeholder="'请选择实验室'"
                    :value="ruleForm.laboratoryName"
                    @dropDown="(val) => (ruleForm.laboratoryName = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="耗材柜" prop="cabinetName">
                  <selectName
                    :selectArr="cabinetNameList"
                    keys="cabinetName"
                    label="cabinetName"
                    valueKey="cabinetName"
                    :title="false"
                    :placeholder="'请选择耗材柜'"
                    :value="ruleForm.cabinetName"
                    @dropDown="(val) => (ruleForm.cabinetName = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="试剂名称" prop="reagentName">
                  <el-input
                    v-model="ruleForm.reagentName"
                    size="mini"
                    :placeholder="'请输入试剂名称'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="入库数量" prop="warehousingNum">
                  <el-input
                    class="maintenanceInput"
                    v-model="ruleForm.warehousingNum"
                    size="mini"
                    :placeholder="'请输入入库数量'"
                  ></el-input>
                  <span class="maintenancePeriod">kg</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生产日期" prop="productionDate">
                  <Time
                    class="productDateTime"
                    :type="'date'"
                    :value="ruleForm.productionDate"
                    @valueChange="(event) => (ruleForm.productionDate = event)"
                  ></Time>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="有效期" prop="effectiveDate">
                  <Time
                    :timetype="false"
                    class="productDateTime"
                    :type="'date'"
                    :value="ruleForm.effectiveDate"
                    @valueChange="(event) => (ruleForm.effectiveDate = event)"
                  ></Time>
                  <!-- <el-input
                    class="maintenanceInput"
                    v-model="ruleForm.effectiveDate"
                    size="mini"
                    :placeholder="'请输入有效期'"
                    @valueChange="(event) => (ruleForm.effectiveDate = event)"
                  ></el-input>
                  <span class="maintenancePeriod">d</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="存放位置" prop="floorNum">
                  <selectName
                    :selectArr="floorNumList"
                    :title="false"
                    keys="id"
                    label="name"
                    valueKey="id"
                    :placeholder="'请选择存放位置'"
                    :value="ruleForm.floorNum"
                    @dropDown="(val) => (ruleForm.floorNum = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="生产厂家" prop="factoryName">
                  <selectName
                    :selectArr="addDetailInfo.factoryList"
                    :title="false"
                    keys="factoryName"
                    label="factoryName"
                    valueKey="factoryName"
                    :placeholder="'请选择生产厂家'"
                    :value="ruleForm.factoryName"
                    @dropDown="(val) => (ruleForm.factoryName = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="formBox">
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="入库人员（不可修改）">
                  <el-input
                    v-model="addDetailInfo.buyer"
                    size="mini"
                    :placeholder="'请输入入库人员'"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式（不可修改）">
                  <el-input
                    v-model="addDetailInfo.phone"
                    :disabled="true"
                    size="mini"
                    :placeholder="'请输入入库人员联系方式'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </scroll>
    </template>
    <template #bottom>
      <div class="bottom">
        <div class="more" @click="submitform('ruleForm')">提交</div>
      </div>
    </template>
  </formDialog>
</template>

<script>
import { addConsumables, findEquimentList } from "@/http/api";
export default {
  props: ["dialogFormVisible", "title", "laboratoryData", "addDetailInfo"],
  data() {
    return {
      cabinetNameList: [],
      floorNumList: [
        {
          id: 1,
          name: "上层",
        },
        {
          id: 2,
          name: "中层",
        },
        {
          id: 3,
          name: "下层",
        },
      ],
      ruleForm: {
        // falcutyName: "环境学院", //学院名称
        laboratoryName: "", //实验室
        cabinetName: "", //耗材柜
        reagentName: "", //试剂名称
        warehousingNum: "", //入库数量
        productionDate: "", //生产日期
        effectiveDate: "", //有效期
        floorNum: "", //	存放位置
        factoryName: "", //厂家名称
        // createBy: "", //入库人员
        // contaction: "", //入库人员联系方式
      },

      rules: {
        falcutyName: [
          { required: true, message: "请输入学院名称", trigger: "blur" },
        ],
        laboratoryName: [
          { required: true, message: "请选择实验室", trigger: "blur" },
        ],
        cabinetName: [
          { required: true, message: "请选择耗材柜", trigger: "change" },
        ],
        reagentName: [
          { required: true, message: "请输入试剂名称", trigger: "blur" },
        ],
        warehousingNum: [
          { required: true, message: "请输入入库数量", trigger: "blur" },
        ],
        productionDate: [
          {
            required: true,
            message: "请选择设备生产日期",
            trigger: "change",
          },
        ],
        effectiveDate: [
          {
            required: true,
            message: "请选择有效期",
            trigger: "change",
          },
        ],
        floorNum: [
          { required: true, message: "请选存放位置", trigger: "blur" },
        ],
        factoryName: [
          { required: true, message: "请输入厂家名称", trigger: "blur" },
        ],

        createBy: [
          { required: true, message: "请输入采购人员", trigger: "blur" },
        ],
        contaction: [
          {
            required: true,
            message: "请输入采购人员联系方式",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 耗材入库新增初始化
    async initfindEquimentList(val) {
      let params = {
        laboratoryName: val,
      };
      let res = await findEquimentList(params);
      if (res.code === 20000) {
        this.cabinetNameList = res.data;
      }
    },
    /* 确定按钮 */
    submitform(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            cabinetName: this.ruleForm.cabinetName,
            laboratoryName: this.ruleForm.laboratoryName,
            factoryName: this.ruleForm.factoryName,
            reagentName: this.ruleForm.reagentName,
            warehousingNum: this.ruleForm.warehousingNum,
            floorNum: this.ruleForm.floorNum,
            effectiveDate: this.ruleForm.effectiveDate,
            productionDate: this.ruleForm.productionDate,
            contaction: this.addDetailInfo.phone,
          };
          let res = await addConsumables(params);
          if (res.code === 20000) {
            this.$emit("setDialog", false);
            this.$refs[formName].resetFields();
            this.$parent.initData(this.$parent.commonIndex);
            this.$notify({
              message: res.message,
              duration: 1000,
            });
          }
        } else {
          return false;
        }
      });
    },
  },
  watch: {
    "ruleForm.laboratoryName": {
      handler(val) {
        this.initfindEquimentList(val);
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss">
.productDateTime {
  .dark-input {
    width: 100% !important;
    margin-right: 0px !important;
  }
}
.demo-ruleForm .el-input__suffix {
  top:-3px !important;
}
</style>